<template>
  <div class="infor">
    <div class="infor-top border-bottom">
      <p class="iconfont backBtn" @click="bakClick">&#xe624;</p>
      <p class="title">个人信息</p>
    </div>
    <div class="infor-center border-bottom">
      <div class="img-comtainer">
        <img src="~assets/images/profile/图层3拷贝@2x.png" alt="" />
      </div>
    </div>

    <div class="infor-footer">
      <!-- 个人信息里面的昵称 -->
      <div class="infor-item border-bottom">
        <p class="key">昵称</p>
        <p class="value">{{ profileInfor.username }}</p>
      </div>

      <!-- 个人信息里面的性别 -->
      <div class="infor-item border-bottom" @click="showSexPopupClick">
        <p class="key">性别</p>
        <van-popover v-model="showSexPopup" trigger="click" :overlay="true">
          <van-radio-group v-model="radio" class="wrapper" ref="radioForm">
            <div class="title border-bottom">性别</div>
            <van-radio
              name="0"
              class="top border-bottom"
              checked-color="#ee0a24"
              label-position="left"
              >男</van-radio
            >
            <van-radio
              name="1"
              class="bottom border-bottom"
              checked-color="#ee0a24"
              label-position="left"
              >女</van-radio
            >
            <div class="btn" @click="btnClick">确定</div>
          </van-radio-group>
        </van-popover>
        <p class="value">{{ sex }}</p>
      </div>
      
      <!-- 个人信息里面的年龄 -->
      <div class="infor-item border-bottom" @click="showAgePopupClick">
        <p class="key">年龄</p>
        <van-popover v-model="showAgePopup" trigger="click" :overlay="true">
          <van-datetime-picker
            class="date-container"
            v-model="currentDate"
            type="date"
            title=""
            :min-date="minDate"
            :max-date="maxDate"
            @change="changeFn()"
            @confirm="confirmFn()"
            @cancel="cancelFn()"
          />
        </van-popover>
        <p class="value">
          {{ profileInfor.age }} {{ profileInfor.constellation }}
        </p>
      </div>
      <!-- 个人信息里面的地址 -->
      <div class="infor-item address border-bottom">
        <p class="key">地址</p>
        <p class="value">></p>
      </div>
      <!-- 个人信息里面的实名认证 -->
      <div class="infor-item border-bottom">
        <p class="key">实名认证</p>
        <p class="value">></p>
      </div>
    </div>
  </div>
</template>

<script>
import { getProfileInfor, setAgeInfor, setSexInfor } from "network/profile";
import { getAge, getAstro } from "common/utils";
export default {
  name: "infor",

  data() {
    return {
      profileInfor: {}, //接口中请求后端接口获取的用户信息的数据
      showSexPopup: false, //点击按钮将 showSexPopup变为true 显示修改性别的弹框
      showAgePopup: false, //点击按钮将 showAgePopup 显示修改年龄的弹框
      radio: "1", //点击改性别的弹框得到的选中男或是女（0:男；1:女）然后发送修改性别请求

      minDate: new Date(1900, 0, 1), //最小的时间
      maxDate: new Date(2025, 12, 31), //最大的时间
      currentDate: new Date(), //点击的时间
      timeValue: "",
    };
  },

  computed: {
    /* 将得到的代表性别的0或是1转化为对应的男或女 */
    sex() {
      return this.profileInfor.sex == 0 ? "男" : "女";
    },
  },

  created() {
    /* 页面妹挂载之前调用接口请求数据等到页面挂载的时候显示数据 */
    this.getProfileInfor();
  },

  methods: {
    /*发送请求获取用户个人信息的数据  */
    getProfileInfor() {
      if (sessionStorage.getItem("token")) {
        /* 1.获取存储在sessionStore中的token */
        let token = sessionStorage.getItem("token");
        // console.log(token);
        /* 2.根据 token 发送请求获取用户个人信息的数据*/
        getProfileInfor(token).then((res) => {
          this.profileInfor = res.result;
          // console.log(res);
        });
      }
    },

  /* 点击跳转回我的页面 */
    bakClick () {
      this.$router.push("/profile");
    },

    /* 点击显示修改性别的弹框 */
    showSexPopupClick() {
      /* 显示弹框 */
      this.showSexPopup = true;
    },

    /* 点击显示修改年龄的弹框 */
    showAgePopupClick() {
      this.showAgePopup = true;
    },

    /*点击对应的时间的时候触发  */
    changeFn() {
      // 值变化是触发
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },

    /* 点击确认按钮的时候触发 */
    confirmFn() {
      // 确定按钮
      // console.log(this.timeFormat(this.currentDate));
      //将showAgePopup设置为false，关闭弹框
      this.showAgePopup = false;

       /* 2.得到后端接口中需要的token */
      let token = sessionStorage.getItem("token");

      /* 根据用户操作选中的时间计算得到用户的年龄 */
      let age = getAge(this.timeFormat(this.currentDate))

      /* 根据用户操作选中的时间计算得到用户的星座 */
      let ageStr = this.timeFormat(this.currentDate).split('-')
      let constellation =  getAstro(ageStr[0],ageStr[1],ageStr[2])
      setSexInfor(age,token,constellation).then (res => {
        
        /* 3.更改完之后再调用之前给页面中负值的获取获取用户个人信息的数据请求实时更新页面中的数据 */
        this.getProfileInfor();
      })
    },

    /* 单机取消按钮的时候触发 */
    cancelFn() {
      //将showAgePopup设置为false，关闭弹框
      this.showAgePopup = false;
    },

    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    },

    /* 1.点击弹框里面姓改性别弹框的确认按钮，发送请求更改后端接口中的性别 */
    btnClick() {
      // console.log(this.radio);
      /* 2.得到后端接口中需要的token和性别发送请求 */
      let radio = this.radio * 1;
      let token = sessionStorage.getItem("token");
      setAgeInfor(radio, token).then((res) => {
        /* 3.更改完之后再调用之前给页面中负值的获取获取用户个人信息的数据请求实时更新页面中的数据 */
        this.getProfileInfor();
      });
      /* 4.点击确定之后将弹框关闭 */
      this.showSexPopup = false;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 2.675rem;
  height: 1.72rem;
  font-size: 0.15rem;
  position: absolute;
  left: -1.4rem;
  top: 0rem;
  margin: 0px;
  z-index: 2002;
  background: #fff;
  .title {
    height: 0.395rem;
    line-height: 0.395rem;
    text-align: center;
  }
  .top {
    height: 0.435rem;
    line-height: 0.435rem;
    margin-left: 0.155rem;
    margin-right: 0.155rem;
    display: flex;
    justify-content: space-between;
  }
  .bottom {
    height: 0.435rem;
    line-height: 0.435rem;
    margin-left: 0.155rem;
    margin-right: 0.155rem;
    display: flex;
    justify-content: space-between;
  }
  .btn {
    text-align: center;
    line-height: 0.435rem;
  }
}
.true {
  height: 0.435rem;
  text-align: center;
  line-height: 0.435rem;
}

.date-container {
  width: 375px;
  background: #fff;
  margin-right: 0.3rem;
  margin-top: 0.1rem;
  margin-left: .5rem;
}

.infor {
  height: 100vh;
  background: #eee;
  .infor-top {
    height: 0.44rem;
    line-height: 0.44rem;
    display: flex;
    background: #fff;
    .backBtn {
      margin-left: 0.15rem;
    }
    .title {
      font-size: 0.18rem;
      color: #333;
      margin-left: 1.27rem;
    }
  }
  .infor-center {
    height: 1.915rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .img-comtainer {
      width: 0.8rem;
      height: 0.8rem;
      img {
        width: 100%;
      }
    }
  }
  .infor-footer {
    .address {
      margin-top: 0.1rem;
    }
    .infor-item {
      display: flex;
      height: 0.44rem;
      background: #fff;
      justify-content: space-between;
      align-items: center;
      .key {
        font-size: 0.14rem;
        color: #333;
        margin-left: 0.15rem;
      }
      .value {
        font-size: 0.14rem;
        color: #999;
        margin-right: 0.13rem;
      }
    }
  }
}
</style>